import React, { useState, useRef } from 'react';
import './design_center.css';

/**
 * Canvas 组件用于展示一个可拖拽和调整大小的图像画布。
 */
const Canvas = () => {
    // 初始化画布尺寸状态
    const [dimensions, setDimensions] = useState({ width: 200, height: 200 });
    // 控制水印显示的状态
    const [showWatermark, setShowWatermark] = useState(true);

    /**
     * 处理拖放事件
     * @param event 拖放事件对象
     */
    const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
        event.preventDefault(); // 阻止默认行为
        const imageSrc = event.dataTransfer.getData('text/plain'); // 获取拖放的数据

        // 创建一个新的图片元素
        const imgElement = document.createElement('img');
        imgElement.src = imageSrc;
        imgElement.style.width = '100px';
        imgElement.style.position = 'absolute';

        // 获取当前画布的位置信息
        const canvasRect = event.currentTarget.getBoundingClientRect();

        // 计算图片相对于画布的位置
        const offsetX = event.clientX - canvasRect.left;
        const offsetY = event.clientY - canvasRect.top;

        // 设置图片的位置
        imgElement.style.left = `${offsetX}px`;
        imgElement.style.top = `${offsetY}px`;

        // 将图片添加到画布中
        event.currentTarget.appendChild(imgElement);
    };

    /**
     * 处理拖动进入事件
     * @param event 拖动进入事件对象
     */
    const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
        event.preventDefault(); // 阻止默认行为
    };

    /**
     * 切换水印显示状态
     */
    const toggleWatermark = () => {
        setShowWatermark(!showWatermark);
    };

    /**
     * 调整画布尺寸
     * @param delta 增量值
     */
    const adjustDimensions = (delta: number) => {
        const newWidth = Math.max(10, dimensions.width + delta);
        const newHeight = Math.max(10, dimensions.height + delta);
        setDimensions({ width: newWidth, height: newHeight });
    };

    return (
        <div
            className="canvas"
            onDrop={handleDrop}
            onDragOver={handleDragOver}
            style={{
                position: 'relative',
                border: '1px solid #ccc',
                backgroundColor: showWatermark ? 'transparent' : '#f0f0f0',
                width: dimensions.width,
                height: dimensions.height
            }}
        >
            {showWatermark && ( // 当水印开启时显示水印层
                <div className="watermark">
                    <span>黑魔仙女王张嘉慧</span>
                    <span>黑魔仙女王张嘉慧</span>
                    <span>黑魔仙女王张嘉慧</span>
                    <span>黑魔仙女王张嘉慧</span>
                    <span>黑魔仙女王张嘉慧</span>
                    <span>黑魔仙女王张嘉慧</span>
                    <span>黑魔仙女王张嘉慧</span>
                    <span>黑魔仙女王张嘉慧</span>
                    <span>黑魔仙女王张嘉慧</span>
                    <span>黑魔仙女王张嘉慧</span>
                    
                </div>
            )}
            <button
                onClick={toggleWatermark}
                style={{ position: 'absolute', right: '-100px', top: '10px' }}
            >
                {showWatermark ? '关闭水印' : '开启水印'}
            </button>
            <button
                onClick={() => adjustDimensions(50)}
                style={{ position: 'absolute', left: '800px', top: '500px' }}
            >
                +
            </button>
            <button
                onClick={() => adjustDimensions(-50)}
                style={{ position: 'absolute', left: '800px', top: '540px' }}
            >
                -
            </button>
        </div>
    );
};

export default Canvas;